<template>
	<view class="edit-page">
		<view class="contentBox">
			<view class="form-title">基本信息</view>
			<view class="form-list">
				<view class="form-item">
					<view class="title required">区域</view>
					<view class="value-box" @click="selectZone">
						<view class="value-info">{{ dataForm.zone ? dataForm.zone : '请选择' }}</view>
						<u-icon name="arrow-right" color="#000000"></u-icon>
					</view>
				</view>
				<view class="form-item">
					<view class="title required">大楼</view>
					<view class="value-box" @click="selectBuilding">
						<view class="value-info">{{ dataForm.address ? dataForm.address : '请选择' }}</view>
						<u-icon name="arrow-right" color="#000000"></u-icon>
					</view>
				</view>
				<view class="form-item">
					<view class="title required">房号</view>
					<input v-model="dataForm.name" placeholder="输入房号" class="input" />
					<!-- <view class="unit">RBC</view> -->
				</view>
				<view class="form-item">
					<view class="title required">显示标题</view>
					<input v-model="dataForm.title" placeholder="输入标题" class="input" />
				</view>
			</view>
			<view class="section-box">
				<view class="title">出租类型</view>
				<view class="tags-box">
					<view :class="dataForm.type === item.value ? 'tag-item active' : 'tag-item'"
						v-for="(item, index) in propertyTypes" :key="index" @click="dataForm.type = item.value">
						{{ item.text }}
					</view>
				</view>
			</view>
			<view class="form-list" v-if="dataForm.type != 1 && dataForm.type != ''">
				<view class="form-item">
					<view class="title">户型</view>
					<view class="value-box" @click="$Tips('/pages-landlord/settings/house?pageType=select')">
						<view class="value-info">{{ dataForm.house_type ? dataForm.house_type : '请选择' }}</view>
						<u-icon name="arrow-right" color="#000000"></u-icon>
					</view>
				</view>
			</view>

			<view class="form-list" v-if="dataForm.type == 1">
				<view class="form-item">
					<view class="title">卧室</view>
					<view class="count-box">
						<image class="count-decrease" src="/pages-landlord/static/room/sub.png"
							@click="changeProductCount('room_num', '-')"></image>
						<view class="count-number">{{ dataForm.room_num }}</view>
						<image class="count-increase" src="/pages-landlord/static/room/add.png"
							@click="changeProductCount('room_num', '+')"></image>
					</view>
				</view>
			</view>
			<view class="form-list" v-if="dataForm.type == 1">
				<view class="form-item">
					<view class="title">客厅</view>
					<view class="count-box">
						<image class="count-decrease" src="/pages-landlord/static/room/sub.png"
							@click="changeProductCount('ting_num', '-')"></image>
						<view class="count-number">{{ dataForm.ting_num }}</view>
						<image class="count-increase" src="/pages-landlord/static/room/add.png"
							@click="changeProductCount('ting_num', '+')"></image>
					</view>
				</view>
			</view>
			<view class="form-list" v-if="dataForm.type == 1">
				<view class="form-item">
					<view class="title">卫生间</view>
					<view class="count-box">
						<image class="count-decrease" src="/pages-landlord/static/room/sub.png"
							@click="changeProductCount('toilet_num', '-')"></image>
						<view class="count-number">{{ dataForm.toilet_num }}</view>
						<image class="count-increase" src="/pages-landlord/static/room/add.png"
							@click="changeProductCount('toilet_num', '+')"></image>
					</view>
				</view>
			</view>
			<view class="form-list">
				<view class="form-item">
					<view class="title required">面积</view>
					<input v-model="dataForm.area" placeholder="输入面积" class="input" type="digit" />
					<!-- <view class="unit">㎡</view> -->
				</view>
				<view class="form-item">
					<view class="title required">楼层</view>
					<input v-model="dataForm.floor_no" placeholder="输入楼层" class="input" />
					<!-- <view class="unit">楼</view> -->
				</view>
				<view class="form-item">
					<view class="title required">押金</view>
					<view class="input-group">
						<view class="input" @click="showPaymentPicker = true">
							{{ dataForm.payment_type ? formatDataList(dataForm.payment_type, paymentTypeList[0]) : '请选择'
							}}
						</view>
						<input v-model="dataForm.price" placeholder="输入房租" class="input" type="digit" />
					</view>
					<!-- <view class="unit">元/月</view> -->
				</view>
				<view class="form-item">
					<view class="title required">位置</view>
					<view class="value-box" @click="selectLocation">
						<view class="value-info">{{ dataForm.region ? dataForm.region : '请选择房源位置' }}</view>
						<u-icon name="arrow-right" color="#000000"></u-icon>
					</view>
				</view>
				<view class="form-item">
					<view class="title required">社区</view>
					<view class="value-box" @click="showCommunity = true">
						<view class="value-info">
							{{ dataForm.community ? formatDataList(dataForm.community, columnsCommunity[0]) : '请选择所在社区'
							}}
						</view>
						<u-icon name="arrow-right" color="#000000"></u-icon>
					</view>
				</view>
				<view class="form-item">
					<view class="title required">联系电话</view>
					<input v-model="dataForm.mobile" placeholder="输入电话" class="input" />
				</view>
			</view>
			<view class="select-box">
				<view class="select-title">
					<view class="title">其他费用</view>
					<image src="/pages-landlord/static/room/select-add.png" class="icon-select"
						@click="showPopup = true"></image>
				</view>
				<view class="select-list">
					<!--          @click="updateFixedCosts(item)"-->
					<view class="select-item" v-for="(item, index) in dataForm.fixed" :key="index">
						<view class="item-top">
							<view class="top-left">
								<image :src="formatPtIcon(item)" class="top-icon"></image>
								<view class="top-name">{{ item.type_name || '--' }}</view>
							</view>
							<u-icon name="close" color="#000000" @click="deleteFixed(item)"></u-icon>

						</view>
						<view class="top-bottom">
							<input v-model="item.price" type="digit" placeholder="输入金额" class="input" />
							<view class="unit">{{ formatPtUnit(item) }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="section-box">
				<view class="title">房源标签</view>
				<view class="tags-box">
					<view :class="item.select ? 'tag-item tag-item1 active' : 'tag-item tag-item1'"
						v-for="(item, index) in roomTagsList" :key="index" @click="selectRoomTags(item)">
						{{ item.option_name }}
					</view>
				</view>
			</view>
			<view class="select-box">
				<view class="select-title">
					<view class="title">房间设施</view>
				</view>
				<view class="facility-grid">
					<view :key="index" :class="item.select ? 'facility-item active' : 'facility-item'"
						v-for="(item, index) in facilityList" @click="selectFacility(item)">
						<image :src="item.icon" mode="" style="width: 64rpx; height: 64rpx"></image>
						<text>{{ item.option_name }}</text>
					</view>
				</view>
			</view>
			<view class="select-box">
				<view class="select-title">
					<view class="title">房源照片</view>
					<view>{{ fileList1.length }}/8</view>
				</view>
				<view style="margin-bottom: 20rpx">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="8" width="144rpx" height="144rpx">
						<image src="../static/images/tp.png" mode="widthFix" style="width: 144rpx; height: 144rpx">
						</image>
					</u-upload>
				</view>
				<view class="select-title">
					<view class="title">封面图片</view>
				</view>
				<view style="margin-bottom: 20rpx">
					<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" :maxCount="1"
						width="144rpx" height="144rpx">
						<image src="../static/images/tp.png" mode="widthFix" style="width: 144rpx; height: 144rpx">
						</image>
					</u-upload>
				</view>
				<view class="select-title">
					<view class="title">视频介绍</view>
				</view>
				<view style="margin-bottom: 20rpx">
					<u-upload :fileList="fileList3" :previewFullImage="true" @afterRead="afterRead" @delete="deletePic"
						name="3" accept="video" :maxCount="1" width="144rpx" height="144rpx">
						<image src="../static/images/tp.png" mode="widthFix" style="width: 144rpx; height: 144rpx">
						</image>
					</u-upload>
				</view>
			</view>
			<view class="form-title">房源简介</view>
			<view class="select-box">
				<view class="input-box">
					<input type="text" v-model="dataForm.intro" placeholder="请输入房源简介">
				</view>
			</view>
			<view class="form-title">入住须知</view>
			<view class="select-box">
				<view class="input-box">
					<input type="text" v-model="dataForm.notice" placeholder="请输入入住须知">
				</view>
			</view>
			<view class="fillBox" style="height: 150rpx;"></view>
			<view class="safe-bottom page-bottom">
				<view class="icon-box" @click="handleMore">
					<u-icon name="grid" size="20" color="#444444"></u-icon>
					<view class="label">更多</view>
				</view>
				<view class="icon-box" @click="rentalRegistration" v-if="dataForm.status != 3">
					<u-icon name="order" size="20" color="#444444"></u-icon>
					<view class="label">出租登记</view>
				</view>
				<view class="icon-box" @click="receiptNew" v-if="dataForm.status == 3">
					<u-icon name="file-text" size="20" color="#444444"></u-icon>
					<view class="label">账单</view>
				</view>
				<view class="icon-box" @click="tobill" v-if="dataForm.status == 3">
					<u-icon name="file-text" size="20" color="#444444"></u-icon>
					<view class="label">生成</view>
				</view>
				<view class="icon-box" @click="rentalContract" v-if="dataForm.status == 3">
					<u-icon name="order" size="20" color="#444444"></u-icon>
					<view class="label">租客合同</view>
				</view>
				<view class="action-btn-group">
					<view class="action-btn" @click="$u.throttle(confirmSave, 2000)">保存</view>
				</view>
			</view>
		</view>
		<u-popup :show="showPopup" mode="bottom" :closeOnClickOverlay="false" round="40rpx">
			<view class="filter-modal">
				<view class="modal-title">新增其他费用</view>
				<view class="modal-content">
					<!-- 在这里添加筛选内容 -->
					<view class="cost-list">
						<view :class="item.select ? 'cost-item active' : 'cost-item'" v-for="(item, index) in costList"
							:key="index" @click="selectCost(item)">
							<image :src="item.icon" class="cost-icon"></image>
							<view class="cost-name">{{ item.type_name }}</view>
						</view>
					</view>
					<view class="modal-actions">
						<view class="action-btn1" @click="handleCancel">取 消</view>
						<view class="action-btn2" @click="handleConfirm">确 定</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-picker :show="showCommunity" :columns="columnsCommunity" @cancel="showCommunity = false"
			@confirm="confirmCommunity" keyName="name"></u-picker>
		<u-picker :show="showPaymentPicker" :columns="paymentTypeList" keyName="name"
			@cancel="showPaymentPicker = false" @confirm="confirmSelectPayment"></u-picker>
		<u-picker :show="showHxPicker" :columns="houseTypeList" keyName="name" @cancel="showHxPicker = false"
			@confirm="confirmSelectHx"></u-picker>
	</view>
</template>

<script>
import {
	hxList,
	roomEdit,
	getOptionList,
	getCostList,
	roomDelete,
	roomDetail,
} from '@/api/landlord'
// 定义事件名称常量（避免魔法字符串）
const EVENT_TYPES = {
	BUILDING_SELECT: 'selectBuilding',
	HOUSE_TYPE_SELECT: 'selectHouseType',
	METER_SELECT: 'selectRoomMeterInfo',
	METER_DELETE: 'deleteRoomMeterInfo',
	FIXED_COST_SELECT: 'selectRoomFixedCosts',
	FIXED_COST_DELETE: 'deleteRoomFixedCosts',
	SUPPORT_SELECT: 'selectRoomSupportInfo',
	SUPPORT_DELETE: 'deleteRoomSupportInfo'
};

export default {
	data() {
		return {
			showPopup: false, // 是否显示筛选弹窗
			room_id: '', // 房间ID
			dataForm: {
				"address": "",
				"name": "",
				"contract_id": "",
				"build_id": "",
				"building": null,
				"type": "",
				"house_type": "",
				"area": "",
				"floor_no": "",
				"images": "",
				"remark": "",
				"zone": "",
				"zone_id": "",
				"price": "",
				"payment_type": "",
				"intro": "",
				"notice": "",
				"tags": [],
				"fixed": [],
				"pt": [],
				"room_num": 0,
				"status": 0,
				"ting_num": 0,
				"toilet_num": 0
			},
			showPaymentPicker: false,
			paymentTypeList: [
				[{
					name: "押一付一",
					type: "押一付一",
				},
				{
					name: "押一付二",
					type: "押一付二",
				}, {
					name: "押一付三",
					type: "押一付三",
				}, {
					name: "押二付一",
					type: "押二付一",
				}, {
					name: "押二付二",
					type: "押二付二",
				}, {
					name: "押二付三",
					type: "押二付三",
				}, {
					name: "押三付一",
					type: "押三付一",
				}, {
					name: "押零付一",
					type: "押零付一",
				}
				]
			],
			propertyTypes: [{
				text: '居住',
				value: 1
			}, {
				text: '商铺',
				value: 2
			}, {
				text: '厂房',
				value: 3
			}, {
				text: '办公',
				value: 4
			}, {
				text: '仓库',
				value: 5
			}, {
				text: '建材',
				value: 6
			}, {
				text: '物业',
				value: 7
			}, {
				text: '车位',
				value: 8
			}],
			selectTypeInfo: '', // 选中的类型
			fileList1: [],
			fileList2: [],
			fileList3: [],
			houseTypeList: [], // 户型列表
			showHxPicker: false, // 是否显示户型选择器
			facilityList: [],
			roomTagsList: [],
			costList: [],
			showCommunity: false, //是否显示社区
			columnsCommunity: [], //社区列表
		}
	},
	async onLoad(options) {
		await this.getOptionList()
		await this.getCostList()
		if (options && options.room_id) {
			this.room_id = options.room_id
			this.getRoomDetail()
		}
	},
	onShow() {
		this.initEventListeners()
		this.getHxList();
	},
	methods: {
		formatPtIcon(item) {
			const costInfo = this.costList.find(cost => cost.cfg_id === item.cfg_id);
			return costInfo ? costInfo.icon : '';
		},
		formatPtUnit(item) {
			const costInfo = this.costList.find(cost => cost.cfg_id === item.cfg_id);
			return costInfo ? costInfo.unit : '';
		},
		// 格式化表单数据,判断meter、fixed、pt是否存在里的对象中是否包含id和room_id字段，如果存在则删除
		formatFormData() {
			let formData = JSON.parse(JSON.stringify(this.dataForm));
			formData.fixed = formData.fixed.map(item => {
				if (item.id && item.room_id) {
					delete item.id;
					delete item.room_id;
				}
				return item;
			});
			formData.pt = formData.pt.map(item => {
				if (item.id && item.room_id) {
					delete item.id;
					delete item.room_id;
				}
				return item;
			});
			return formData;
		},
		tobill() {
			uni.navigateTo({
				url: '/pages-landlord/room-manage/generate-bill?house_id=' + this.dataForm.house_id
			});
		},
		handleMore() {
			let that = this
			const itemList = ['收支明细', '操作记录', '复制房源', '删除房源']
			const actionMap = ['ledger', 'log', 'copy', 'del']
			if (this.dataForm.status === 3) {
				itemList.unshift('查看租客')
				actionMap.unshift('roommate')
			} else {
				itemList.unshift('历史合同', '历史账单')
				actionMap.unshift('history-contract', 'history-bill')
			}
			uni.showActionSheet({
				itemList: itemList,
				success(res) {
					switch (actionMap[res.tapIndex] || '') {
						case 'history-contract':
							uni.navigateTo({
								url: '/pages-landlord/contract/contractList?room_id=' + that.room_id
							});
							break;
						case 'history-bill':
							uni.navigateTo({
								url: '/pages-landlord/house/receiptNew?room_id=' + that.room_id + '&kw=' + that.dataForm.name + '&building_id=' + that.dataForm.build_id + '&building_name=' + that.dataForm.building.name
							});
							break;
						case 'roommate':
							uni.navigateTo({
								url: '/pages-landlord/contract/roomMateList?contract_id=' + that.dataForm.contract_id
							});
							break;
						case 'ledger':
							uni.navigateTo({
								url: '/pages-landlord/ledger/index?house_id=' + that.dataForm.house_id
							});
						case 'log':
							uni.navigateTo({
								url: '/pages-landlord/room-manage/change-log?room_id=' + that.room_id
							});
							break;
						case 'copy':
							uni.navigateTo({
								url: '/pages-landlord/room-manage/add-room?room_id=' + that.room_id
							});
							break;
						case 'del':
							uni.showModal({
								confirmColor: "#FE4F04",
								content: "确定删除该房源吗？",
								success(res) {
									if (res.confirm) {
										roomDelete({
											id: that.room_id
										}).then(res => {
											that.$Tips({
												title: '删除房源成功'
											}, {
												url: '/pages-landlord/index',
												tab: 4
											});
										});
									}
								}
							})
							break;
						default:
					}
				}
			})
		},
		rentalRegistration() {
			if (!this.dataForm.contract_id) {
				this.$Tips('/pages-landlord/room-manage/rental-registration?room_id=' + this.dataForm.room_id)
			} else {
				this.$Tips('/pages-landlord/room-manage/rental-registration?contract_id=' + this.dataForm.contract_id)
			}
		},
		receiptNew() {
			this.$Tips('/pages-landlord/house/receiptNew')
		},
		rentalContract() {
			this.$Tips('/pages-landlord/room-manage/rental-registration?contract_id=' + this.dataForm.contract_id)
		},
		// 获取房间详情
		getRoomDetail() {
			roomDetail({
				id: this.room_id
			}).then(res => {
				this.dataForm = {
					room_id: this.room_id,
					zone: res.data.data.house.region,
					zone_id: res.data.data.zone_id,
					name: res.data.data.name,
					status: res.data.data.status,
					title: res.data.data.house.name,
					contract_id: res.data.data.contract_id,
					build_id: res.data.data.build_id,
					building: res.data.data.building,
					address: res.data.data.building.name,
					type: res.data.data.type,
					house_id: res.data.data.house_id,
					house_type: res.data.data.house_type,
					area: res.data.data.area,
					floor_no: res.data.data.floor_no,
					room_num: res.data.data.room_num,
					ting_num: res.data.data.ting_num,
					toilet_num: res.data.data.toilet_num,
					price: res.data.data.price,
					payment_type: res.data.data.house.payment_type,
					region: res.data.data.house.address,
					lat: res.data.data.house.lat,
					lng: res.data.data.house.lng,
					mobile: res.data.data.house.mobile,
					intro: res.data.data.house.intro,
					notice: res.data.data.house.notice,
					community: res.data.data.house.community,
					fixed: res.data.data.fixed,
					pt: res.data.data.pt
				}
				if (this.dataForm.fixed) {
					this.costList = this.costList.map(item => ({
						...item,
						price: this.dataForm.fixed.find(fixedItem => fixedItem.cfg_id === item
							.cfg_id)?.price || '',
						select: this.dataForm.fixed.some(fixedItem => fixedItem.cfg_id === item
							.cfg_id)
					}));
				}

				if (res.data.data.house.images.length > 0) {
					this.fileList1 = res.data.data.house.images.map(item => ({
						url: item,
						img: item,
					}));
				}
				if (res.data.data.house.cover) {
					this.fileList2 = [{
						url: res.data.data.house.cover,
						img: res.data.data.house.cover,
					}];
				}
				if (res.data.data.house.video) {
					this.fileList3 = [{
						url: res.data.data.house.video,
						img: res.data.data.house.video,
					}];
				}
				let tags = res.data.data.house.tags.split(',') || [];
				this.dataForm.tags = tags
				this.roomTagsList = this.roomTagsList.map(item => ({
					...item,
					select: tags.some(tag => tag == item.option_id)
				}));
				this.facilityList = this.facilityList.map(item => ({
					...item,
					select: res.data.data.pt.some(ptItem => ptItem.option_id === item.option_id)
				}));
			})
		},
		// 提交信息
		confirmSave() {
			if (!this.dataForm.build_id) {
				return this.$Toast('请选择大楼');
			}
			if (!this.dataForm.name) {
				return this.$Toast('请输入房号');
			}
			let tags = this.dataForm.tags.length > 0 ? this.dataForm.tags : [];
			this.dataForm.fixed = this.dataForm.fixed.map(item => ({
				id: item.cfg_id,
				price: item.price,
				name: item.type_name,
				cfg_id: item.cfg_id,
				type_name: item.type_name
			}))
			this.dataForm.pt = this.dataForm.pt.map(item => ({
				id: item.option_id,
				name: item.name
			}))
			// this.dataForm.fixed= []
			// this.dataForm.pt= []

			roomEdit({
				...this.dataForm,
				tags: tags.join(','),
				images: this.fileList1.map(item => item.url),
				cover: this.fileList2[0]?.url || '',
				video: this.fileList3[0]?.url || '',
			}).then(res => {
				this.$Toast('添加房间成功')
				uni.reLaunch({
					url: "/pages-landlord/index?tabBarIndex=3",
				});
				// this.getRoomDetail()
				// this.$Tips({
				// 	title: '修改房间成功'
				// }, {
				// 	url: '/pages-landlord/room-manage/room-manage',
				// 	tab: 4
				// });
			})
		},
		// 获取户型列表
		getHxList() {
			hxList().then(res => {
				this.houseTypeList = [res.data.data]
			});
		},
		//选择户型
		confirmSelectHx(event) {
			console.log(event);
			this.showHxPicker = false;
			this.dataForm.house_type = event.value[0].name;
		},
		deleteFixed(item) {
			const index = this.dataForm.fixed.findIndex(fixedItem => fixedItem.cfg_id === item.cfg_id);
			if (index !== -1) {
				this.dataForm.fixed.splice(index, 1);
				this.costList = this.costList.map(costItem => {
					if (costItem.cfg_id === item.cfg_id) {
						return {
							...costItem,
							select: false
						};
					}
					return costItem;
				});
			}
		},
		selectFacility(item) {
			item.select = !item.select;
			if (item.select) {
				this.dataForm.pt.push({
					name: item.option_name,
					icon: item.icon,
					option_id: item.option_id
				});
			} else {
				const index = this.dataForm.pt.findIndex(ptItem => ptItem.option_id === item.option_id);
				if (index !== -1) {
					this.dataForm.pt.splice(index, 1);
				}
			}
		},
		selectRoomTags(item) {
			item.select = !item.select;
			if (item.select) {
				this.dataForm.tags.push(item.option_id);
			} else {
				const index = this.dataForm.tags.indexOf(item.option_id);
				if (index !== -1) {
					this.dataForm.tags.splice(index, 1);
				}
			}
		},
		getCostList() {
			getCostList().then(res => {
				this.costList = res.data.data.map((item) => {
					return {
						icon: item.icon,
						type_name: item.name,
						cfg_id: item.id,
						unit: item.unit
					}
				})
			});
		},
		confirmCommunity(event) {
			this.dataForm.community = event.value[0].type;
			this.showCommunity = false;
		},
		selectLocation() {
			let that = this;
			uni.chooseLocation({
				success: function (res) {
					that.dataForm.region = res.name;
					that.dataForm.lat = res.latitude;
					that.dataForm.lng = res.longitude;
					that.$forceUpdate()
				}
			});
		},
		// 获取户型列表
		getOptionList() {
			getOptionList({
				cid: 4
			}).then(res => {
				this.facilityList = res.data.data.map(item => {
					return {
						...item,
						select: false
					}
				})
			});
			getOptionList({
				cid: 8
			}).then(res => {
				this.roomTagsList = res.data.data.map(item => {
					return {
						...item,
						select: false
					}
				})
			});
			getOptionList({
				cid: 2,
			}).then(res => {
				var community = res.data.data.map((item) => {
					return {
						name: item.option_name,
						type: item.option_id
					}
				})
				this.columnsCommunity = [
					[...community]
				];
			})
		},
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: "uploading",
					message: "上传中",
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.$uploadFilePromise(lists[i].url);
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: "success",
						message: "",
						url: result.fullurl,
						img: result.url
					})
				);
				fileListLen++;
			}
		},
		// 选择押付方式
		confirmSelectPayment(event) {
			this.dataForm.payment_type = event.value[0].type;
			this.showPaymentPicker = false;
		},
		formatDataList(data, list) {
			if (!data || !list || !Array.isArray(list)) {
				return '';
			}
			const item = list.find(item => item.type == data);
			return item ? item.name : '';
		},
		changeProductCount(type, operation) {
			if (operation === '+') {
				this.dataForm[type]++;
			} else if (operation === '-' && this.dataForm[type] > 0) {
				this.dataForm[type]--;
			}
		},

		// 初始化事件监听
		initEventListeners() {
			// 区域选择
			uni.$on(EVENT_TYPES.ZONE_SELECT, this.handleZoneSelect);

			// 建筑选择
			uni.$on(EVENT_TYPES.BUILDING_SELECT, this.handleBuildingSelect);

			// 户型选择
			uni.$on(EVENT_TYPES.HOUSE_TYPE_SELECT, this.handleHouseTypeSelect);

			// 固定费用管理
			// uni.$on(EVENT_TYPES.FIXED_COST_SELECT, (data) => this.handleItemUpdate(data, 'fixed', 'type_name'));
			// uni.$on(EVENT_TYPES.FIXED_COST_DELETE, (data) => this.handleItemDelete(data, 'fixed', 'type_name'));

			// 配套设备管理
			// uni.$on(EVENT_TYPES.SUPPORT_SELECT, (data) => this.handleItemUpdate(data, 'pt', 'name'));
			// uni.$on(EVENT_TYPES.SUPPORT_DELETE, (data) => this.handleItemDelete(data, 'pt', 'name'));

		},
		// 移除事件监听
		removeEventListeners() {
			uni.$off(EVENT_TYPES.ZONE_SELECT);
			uni.$off(EVENT_TYPES.BUILDING_SELECT);
			uni.$off(EVENT_TYPES.HOUSE_TYPE_SELECT);
			// uni.$off(EVENT_TYPES.FIXED_COST_SELECT);
			// uni.$off(EVENT_TYPES.FIXED_COST_DELETE);
			// uni.$off(EVENT_TYPES.SUPPORT_SELECT);
			// uni.$off(EVENT_TYPES.SUPPORT_DELETE);
		},
		// 处理区域选择
		handleZoneSelect(zone) {
			if (zone) {
				this.dataForm.zone_id = zone.id;
				this.dataForm.zone = zone.name;
			}
		},
		// 处理建筑选择
		handleBuildingSelect(building) {
			if (building) {
				this.dataForm.address = building.name;
				this.dataForm.build_id = building.id;
				this.removeEventListeners();
			}
		},
		// 处理户型选择
		handleHouseTypeSelect(houseType) {
			if (houseType) {
				this.dataForm.house_type = houseType.name;
				this.removeEventListeners();
			}
		},
		/**
		 * 通用更新/添加逻辑
		 * @param {Object} data 新数据
		 * @param {String} arrayKey dataForm 中的数组键名
		 * @param {String} matchKey 匹配字段名
		 */
		handleItemUpdate(data, arrayKey, matchKey) {
			if (!data) return;


			// 使用 findIndex 查找是否已存在
			const existingIndex = this.dataForm[arrayKey].findIndex(
				item => item[matchKey] === data[matchKey]
			);

			// 存在则更新，不存在则添加
			if (existingIndex !== -1) {
				// UniApp 中直接修改数组元素通常是响应式的
				this.dataForm[arrayKey].splice(existingIndex, 1, data);
			} else {
				this.dataForm[arrayKey].push(data);
			}

			this.removeEventListeners();
		},

		/**
		 * 通用删除逻辑
		 * @param {Object} data 要删除的数据（只需包含匹配字段）
		 * @param {String} arrayKey dataForm 中的数组键名
		 * @param {String} matchKey 匹配字段名
		 */
		handleItemDelete(data, arrayKey, matchKey) {
			if (!data) return;

			const index = this.dataForm[arrayKey].findIndex(
				item => item[matchKey] === data[matchKey]
			);

			if (index !== -1) {
				this.dataForm[arrayKey].splice(index, 1);
			}
			this.removeEventListeners()
		},
		selectCost(item) {
			item.select = !item.select;
		},
		handleCancel() {
			this.showPopup = false;
		},
		handleConfirm() {
			this.showPopup = false;
			let that = this
			let a = this.costList.filter(item => item.select).map(item => {
				return {
					cfg_id: item.cfg_id,
					type_name: item.type_name,
					price: that.dataForm.fixed.find(fixedItem => fixedItem.cfg_id === item.cfg_id)?.price || '',
				};
			});
			this.dataForm.fixed = a
		},
		formatFormType(type) {
			const typeIndex = this.propertyTypes.findIndex(item => item.value === type);
			return typeIndex !== -1 ? this.propertyTypes[typeIndex].text : '请选择';
		},
		selectZone() {
			uni.navigateTo({
				url: '/pages-landlord/room-manage/select-zone'
			})
		},
		selectBuilding() {
			uni.navigateTo({
				url: '/pages-landlord/select-building/select-building?zone_id=' + this.dataForm.zone_id +
					'&zone=' + this.dataForm.zone
			})
		},
		updateMeterInfo(item) {
			uni.navigateTo({
				url: '/pages-landlord/room-manage/instrument-details?dataInfo=' + JSON.stringify(item)
			})
		},
		selectFixedCosts() {
			uni.navigateTo({
				url: '/pages-landlord/room-manage/fixed-costs'
			})
		},
		updateFixedCosts(item) {
			uni.navigateTo({
				url: '/pages-landlord/room-manage/fixed-costs?dataInfo=' + JSON.stringify(item)
			})
		},
		selectSupportInfo() {
			uni.navigateTo({
				url: '/pages-landlord/room-manage/support-detail'
			})
		},
		updateSupportInfo(item) {
			uni.navigateTo({
				url: '/pages-landlord/room-manage/support-detail?dataInfo=' + JSON.stringify(item)
			})
		},
		// 取消保存
		cancelSave() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
}
</script>


<style lang="scss" scoped>
.filter-modal {
	padding: 40rpx 20rpx 20rpx 20rpx;

	.modal-title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: left;
		margin-bottom: 20rpx;
	}

	.modal-content {
		max-height: 60vh;
		overflow-y: auto;

		.cost-list {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-gap: 20rpx;

			.cost-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 24rpx;
				background: #F8F8F8;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				border: 2rpx solid transparent;

				.cost-icon {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 10rpx;
				}

				.cost-name {
					font-size: 24rpx;
					color: #333;
				}
			}

			.cost-item.active {
				background: #FFEDE1;
				border: 2rpx solid #FE4F04;
			}
		}

		.modal-actions {
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;

			.action-btn1,
			.action-btn2 {
				width: 44%;
				height: 88rpx;
				font-weight: bold;
				font-size: 30rpx;
				line-height: 88rpx;
				text-align: center;
				border-radius: 44rpx;
				border: 2rpx solid #FE4F04;
			}

			.action-btn1 {
				color: #FE4F04;
				background: #fff;
			}

			.action-btn2 {
				color: #fff;
				background: #FE4F04;
			}
		}
	}
}

.section-box {
	padding: 20rpx;
	border-radius: 16rpx;
	margin: 20rpx;
	background: #FFFFFF;

	.title {
		font-size: 28rpx;
		color: #222222;
		font-weight: 600;
		margin-bottom: 20rpx;
	}

}

.tags-box {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 20rpx;

	.tag-item {
		font-size: 24rpx;
		height: 62rpx;
		text-align: center;
		color: #333333;
		line-height: 62rpx;
		padding: 0rpx 40rpx;
		border-radius: 40rpx;
		background: #F5F6FA;
		border: 1rpx solid #F5F6FA;
	}

	.tag-item1 {
		padding: 0rpx 20rpx;
		text-align: center;
	}

	.tag-item.active {
		color: #FF7D41;
		background: #FFF6ED;
		border: 1rpx solid #FE4F04;
	}
}

/* 底部操作菜单 */
.page-bottom {
	position: fixed;
	width: 100%;
	bottom: 0rpx;
	z-index: 200;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background: #ffffff;
	border-radius: 16rpx;
	padding: 20rpx;
	box-sizing: border-box;

	button {
		margin: unset;
		padding: unset;
		background-color: #ffffff;
	}

	button::after {
		border: none;
	}

	.icon-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
		color: #333333;
		margin-right: 48rpx;

		.label {
			font-size: 22rpx;
			color: #333333;
			margin-top: 6rpx;
		}
	}

	.action-btn-group {
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		flex: 1;

		.action-btn {
			width: 100%;
			height: 88rpx;
			background: #FE4F04;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(254, 79, 4, 0.5);
			font-weight: bold;
			font-size: 30rpx;
			color: #ffffff;
			line-height: 88rpx;
			text-align: center;
			border-radius: 44rpx
		}
	}
}

.edit-page {
	width: 100%;
	min-height: 100vh;
	background-color: #F7F8FA;

	.contentBox {
		padding-bottom: 40rpx;
	}
}

.form-switch {
	margin-top: 40rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.form-title {
	font-weight: bold;
	font-size: 26rpx;
	color: #2A0C00;
	margin: 24rpx 40rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.form-list {
	padding: 0 20rpx;
	border-radius: 16rpx;
	margin: 20rpx;
	background: #FFFFFF;

	.form-item {
		padding: 30rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title {
			width: 180rpx;
			font-size: 28rpx;
			color: #666666;
		}

		.count-box {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 20rpx;

			.count-decrease,
			.count-increase {
				width: 48rpx;
				height: 48rpx;
			}

			.count-number {
				width: 60rpx;
				text-align: center;
				font-size: 26rpx;
				margin: 0rpx 10rpx;
			}
		}

		.required::after {
			content: '*';
			color: #FE4F04;
			padding-left: 10rpx;
			font-size: 28rpx;
			font-weight: bold;
		}

		.unit {
			font-size: 28rpx;
			color: #222222;
			margin-left: 20rpx;
		}

		.input-group {
			display: flex;
			align-items: center;
			gap: 40rpx;
		}

		.input {
			width: 200rpx;
			text-align: center;
			height: 48rpx;
			background: #F5F6FA;
			border-radius: 4rpx;
			font-size: 28rpx;
			color: #999999;
			line-height: 48rpx;
		}

		.value-box {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			flex: 1;
			margin-left: 10rpx;

			.value-info {
				font-size: 28rpx;
				color: #222222;
			}
		}

	}

	.form-item:last-child {
		border-bottom: 0;
	}
}

.select-box {
	background: #FFFFFF;
	padding: 20rpx;
	border-radius: 16rpx;
	margin: 20rpx;

	.facility-grid {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 24rpx;
		margin-top: 20rpx;

		.facility-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border: 1px solid transparent;

			text {
				font-size: 24rpx;
				color: #666;
				margin-top: 12rpx;
			}
		}

		.facility-item.active {
			color: #FF7D41;
			border: 1px solid #FE4F04;
			border-radius: 8rpx;
		}
	}

	.input-box {
		font-size: 26rpx;
		color: #2A0C00;
	}

	.select-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: bold;
		font-size: 26rpx;
		color: #2A0C00;
		margin-bottom: 20rpx;

		.icon-select {
			width: 48rpx;
			height: 48rpx;
		}

		.input {
			flex: 1;
			text-align: right;
		}
	}

	.select-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 20rpx;

		.select-item {
			padding: 24rpx;
			margin-bottom: 20rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			border: 1rpx solid #DBDBDB;

			.item-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 10rpx;

				.top-left {
					display: flex;
					align-items: center;

					.top-icon {
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}

					.top-name {
						font-size: 24rpx;
						color: #333333;
					}
				}
			}

			.top-bottom {
				display: flex;
				align-items: center;
				margin-top: 20rpx;

				.input {
					flex: 1;
					height: 60rpx;
					background: #F6F6F6;
					border-radius: 10rpx;
					font-size: 26rpx;
					color: #9A9A9A;
					padding: 0 10rpx;

				}

				.unit {
					font-size: 24rpx;
					color: #353535;
					margin-left: 10rpx;
				}
			}
		}
	}
}
</style>